<template>
  <page>
    <div slot="content">
      <a-tabs :default-active-key="0" @change="tabChange">
        <a-tab-pane v-for="item in tabs" :key="item.key" :tab="item.name"></a-tab-pane>
      </a-tabs>
      <a-table
        :dataSource="list"
        :columns="columns"
        :loading="loading"
        :pagination="pagination"
        rowKey="paperId"
        @change="pageChange"
      >
        <template slot="file" slot-scope="text, row">
          <a-button type="link" @click="goPaperDetails(row.paperId, row.pdfPaperPath)">查看全文</a-button>
        </template>
        <template slot="action" slot-scope="text, row">
          <div v-if="text === 0">
            <a-button
              size="small"
              type="primary"
              ghost
              @click="auditPaper(row.paperId, 0)"
            >
              通过
            </a-button>
            <a-button
              size="small"
              type="danger"
              ghost
              @click="auditPaper(row.paperId, 1)"
            >
              不通过
            </a-button>
          </div>
          <div v-else-if="text === 1">
            <a-switch
              v-if="row.isDisplay"
              default-checked
              checked-children="显示"
              un-checked-children="隐藏"
              @change="switchChange(row.paperId, row.reviewState)" />
            <a-switch
              v-else
              checked-children="显示"
              un-checked-children="隐藏"
              @change="switchChange(row.paperId, row.reviewState)" />
          </div>
          <div v-else-if="text === 2">
            <a-button @click="auditPaper(row.paperId, 5)" size="small" type="primary" ghost>撤销</a-button>
            <a-button @click="auditPaper(row.paperId, 4)" size="small" type="danger" ghost>删除</a-button>
          </div>
          <div v-else-if="text === 3 || text === 4">
            <a-button @click="auditPaper(row.paperId, 5)" size="small" type="primary" ghost>撤销</a-button>
          </div>
          <span v-else>--</span>
        </template>
      </a-table>
    </div>
  </page>
</template>

<script>
  const tabs = [
    { key: 0, name: '待审核' },
    { key: 1, name: '审核通过' },
    { key: 2, name: '审核不通过' },
    { key: 3, name: '作者删除' },
    { key: 4, name: '管理员删除' }
  ]
  const columns = [
    {
      dataIndex: 'paperId',
      title: 'ID',
      align: 'center'
    },
    {
      dataIndex: 'title',
      title: '论文标题',
      align: 'center'
    },
    {
      dataIndex: 'author',
      title: '作者',
      align: 'center'
    },
    {
      dataIndex: 'categoryName',
      title: '分类',
      align: 'center'
    },
    {
      dataIndex: 'createTime',
      title: '提交时间',
      align: 'center'
    },
    {
      dataIndex: 'reviewStateName',
      title: '当前状态',
      align: 'center'
    },
    {
      title: '论文详情',
      align: 'center',
      scopedSlots: { customRender: 'file' }
    },
    {
      dataIndex: 'reviewState',
      title: '操作',
      align: 'center',
      scopedSlots: { customRender: 'action' }
    }
  ]
  const pagination = {
    current: 1,
    pageSize: 10,
    total: 0,
    showTotal: total => `共${total}条数据`,
    pageSizeOptions: ['10', '20', '30', '50', '100'],
    hideOnSinglePage: true,
    showQuickJumper: true
  }
  export default {
    name: "paper-manage",
    data () {
      return {
        tabs,
        columns,
        pagination,
        loading: false,
        screening: {
          reviewState: 0,
        },
        list: []
      }
    },
    mounted () {
      this.fetchData()
    },
    methods: {
      fetchData () {
        this.loading = true
        let params = {
          currentPage: this.pagination.current,
          pageSize: this.pagination.pageSize,
          ...this.screening
        }
        this.$api.paper.getPaperList(params).then(res => {
          if (res?.code === 0) {
            this.list = res.data.records
            this.pagination.total = res.data.total
          } else {
            this.$message.error(res.userMsg)
          }
        }).finally(() => {
          this.loading = false
        })
      },
      auditPaper (paperId, reviewState) {
        this.$api.paper.auditPaper(paperId, reviewState).then(res => {
          if (res?.code === 0) {
            this.$message.success(res.userMsg)
            this.fetchData()
          } else {
            this.$message.error(res.userMsg)
          }
        })
      },
      goPaperDetails (id, name) {
        let url = `/hjx/api/paper/downloadFile/${id}/${name}`
        this.getBlob(url, (blob, filename) => {
          var file = new Blob([blob], { type:'application/pdf' })
          var url = window.URL.createObjectURL(file)
          var a = document.createElement('a')
          a.href = url
          a.download = filename
          a.click()
          window.URL.revokeObjectURL(url)
        })
      },
      getBlob (url, callback) {
        var xhr = new XMLHttpRequest()
        xhr.open('GET', url)
        if (!this.$store.state.token) {
          router.push('/paper/login?redirect=' + window.location.href)
          return
        }
        xhr.setRequestHeader('Authorization', this.$store.state.token)
        xhr.responseType = 'blob'
        xhr.onload = () => {
          callback(xhr.response, this.extractFilenameFromResponseHeader(xhr))
        }
        xhr.send(null)
      },
      extractFilenameFromResponseHeader (xhr) {
        // content-disposition: "attachment; filename=xxxx.docx;"
        const contentDisposition = xhr.getResponseHeader('Content-Disposition')
        const patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
        const result = patt.exec(contentDisposition)
        let filename = ''
        if (result) {
          filename = result.length > 0 ? result[1] : ''
        }
        // 解码之前尝试去除空格和双引号
        // content-disposition: "attachment; filename=\"xxxx.docx\";"
        return decodeURIComponent(filename.trim().replace(new RegExp('"', 'g'), ''))
      },
      pageChange (pagination) {
        this.pagination = pagination
        this.fetchData()
      },
      tabChange (type) {
        this.pagination.current = 1
        this.screening.reviewState = type
        this.fetchData()
      },
      switchChange (id, state) {
        if (state === 5) {
          this.auditPaper(id, 2)
        } else {
          this.auditPaper(id, 3)
        }
      }
    }
  }
</script>

<style scoped>

</style>